<template>
	<view class="content">
		<view class="noClass" v-show="imgList.length==0">
			<image class="imge" src="../../static/images/none-album.png"></image>
			<view class="add">
				暂无相片，快去
				<text class="addAlbum" @click="confirmShare">添加吧~</text>
			</view>
		</view>
		<view class="uni-flex uni-row" style="-webkit-flex-wrap: wrap;flex-wrap: wrap;margin-left: 30rpx;margin-right: 30rpx;">
			<view class="uni-center" style="font-size:0;width: 25%;margin-top: 30rpx;" v-for="(item,index) in imgList" :key="index">
				<image :src="item.img_url" class="image" :style="{opacity:item.opacity}" @click="choseImg(index)" mode="aspectFill"/>
				<view style="font-weight: bold;"></view>
				<view class="check2" v-show="item.check">
					<i class="iconfont iconqueding"></i>
				</view>
			</view>
		</view>
		<!-- 添加相片弹窗 -->
		<uni-popup id="popupShare" ref="popupShare" type="share">
			<view class="uni-flex uni-column" style="background-color: #F2F9FF;">
				<view class="flex-item flex-item-V" @click="camera">拍摄</view>
				<view class="flex-item flex-item-V" @click="chooseImage">从相册内选择</view>
				<view class="flex-item flex-item-V" @click="confirmShareClose">取消</view>
			</view>
		</uni-popup>
		<view class="uni-flex uni-row tab" v-show="tabBar">
			<view class="flex-item" @click="share">
				<view style="margin-top: 20rpx;">
					<i class="iconfont iconfenxiang1" style="font-size: 60rpx;"></i>
					<view>分享</view>
				</view>
			</view>
			<view class="flex-item" @click="delPhoto">
				<view style="margin-top: 20rpx;">
					<i class="iconfont iconlajitong1" style="font-size: 60rpx;"></i>
					<view>删除</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniPopupShare from '@/components/uni-popup/uni-popup-share.vue'
	export default {
		components: {
			uniPopupShare
		},
		data() {
			return {
				imgList:[],		//图片列表
				delNum:[],		//删除数组
				albumArr:null,
				noAlbum:true,
				item:null,
				tabBar:false,		//选择按钮底部导航栏
				tempFilePaths:null,		//选择要上传的图片
				addList:[],		//选择完图片后添加描述上传图片
				page:1,
				pagesize:28,
				lastpage:0,
				albumId:null,
				form_id: '', //用户ID
				userInfo:null,	//登陆信息
				personInfo:null,	//主页信息
			}
		},
		onShow() {
			this.imgList = []
			this.albumList()
		},
		onLoad(option) {
			this.personInfo = JSON.parse(option.personInfo)
			console.log('personInfo',this.personInfo);
			this.form_id = option.userID
			this.userInfo = uni.getStorageSync('userInfo')
			console.log('userInfo',this.userInfo);
			if (option.userID != uni.getStorageSync('userInfo').id) {
				// #ifdef APP-PLUS
				var webView = this.$mp.page.$getAppWebview();
				webView.setTitleNViewButtonStyle(0, {
					width: '0',
					text: ''
				});
				webView.setTitleNViewButtonStyle(1, {
					width: '0',
					text: ''
				});
				// #endif
			}
			this.albumArr = null
			let index = option.albumIndex
			console.log('index',index)
			this.albumId = JSON.parse(option.albumData)[index].album_id
			console.log('albumId',this.albumId)
			this.albumArr = JSON.parse(option.albumData)[index]
			console.log('albumArr',this.albumArr)
		},
		onNavigationBarButtonTap(item){
			console.log(item.index)
			if(item.index == 0){
				this.confirmShare()
			}
			if(item.index == 1&&this.tabBar == false){
				this.tabBar = true
				this.delNum = []
			}else if(item.index == 1&&this.tabBar == true){
				this.tabBar = false
				this.delNum = []
				for (var i = 0; i < this.imgList.length; i++) {
					this.imgList[i].check = false
					this.imgList[i].opacity = 1
				}
			}
		},
		onBackPress(item) {
			
		},
		onPullDownRefresh(){
			if(this.page<1){
				this.page = 1
			}
			this.imgList = []
			this.albumList()
			uni.stopPullDownRefresh()
		},
		onReachBottom(){
			this.page++
			if(this.page<=this.lastpage){
				this.albumList()
			}else if(this.page>this.lastpage){
				uni.showToast({
					icon:false,
					title:'没有更多了',
					duration:2000
				})
				this.page = this.lastpage
			}
		},
		methods: {
			/* 拍摄照片 */
			camera(){
				console.log('拍摄照片')
				var self = this
				self.addList = []
				uni.chooseImage({
				    count: 6, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['camera'], //从相册选择
				    success: function (res) {
				        console.log(JSON.stringify(res.tempFilePaths));
						self.tempFilePaths = res.tempFilePaths
						for (var i = 0; i < res.tempFilePaths.length; i++) {
							self.addList.push({'photoName':null,'photPath':res.tempFilePaths[i]})
						}
						console.log('addList',self.addList)
						/* uni.setStorageSync('addList',JSON.stringify(self.addList))
						uni.setStorageSync('albumArrpho',JSON.stringify(self.albumArr)) */
						if(self.addList.length!=0){
							uni.navigateTo({
							    url: "/pages/album/album-in?addList="+JSON.stringify(self.addList)+"&albumArrpho="+JSON.stringify(self.albumArr),
							});
						}
				    }
				});
				this.confirmShareClose()
			},
			/* 相册内容列表 */
			albumList(){
				this.tabBar = false
				let resData = {
					page:this.page,
					pagesize:this.pagesize,
					album_id:this.albumArr.album_id,
				}
				console.log('resData',resData)
				this.$api.apiPost('/user/video.Photo/listsImg',resData).then(res => {
					const DATA = res.data
					console.log('res',res)
					if(DATA.code == 200){
						this.lastpage = DATA.data.last_page
						console.log(DATA.data.last_page)
						for (var i = 0; i < DATA.data.data.img_list.length; i++) {
							DATA.data.data.img_list[i].opacity = 1
							DATA.data.data.img_list[i].check = false
							this.imgList.push(DATA.data.data.img_list[i])
						}
						console.log('imgList',this.imgList)
					}else{
						if(this.imgList.length!=0){
							this.noAlbum = false
						}else{
							this.noAlbum = true
						}
						// #ifdef APP-PLUS
						var webView = this.$mp.page.$getAppWebview();
						if(this.noAlbum == true){
							// 修改buttons
							webView.setTitleNViewButtonStyle(1, {
							width: '0',
							});
						}else{
							webView.setTitleNViewButtonStyle(1, {
							width: '56rpx',
							height: '40rpx'
							});
						}
						// #endif
					}
				})
			},
			/**
			 * 打开添加相册内容弹窗
			 */
			confirmShare() {
				if(this.userInfo.id == this.form_id){
					this.$refs.popupShare.open()
				}
				console.log('无');
			},
			/**
			 * 关闭添加相册内容弹窗
			 */
			confirmShareClose() {
				this.$refs.popupShare.close()
			},
			/**
			 * 从相册选择图片
			 */
			chooseImage(){
				const self = this
				uni.chooseImage({
				    count: 9, //默认9
				    sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: function (res) {
						self.tempFilePaths = null
						self.addList = []
				        console.log(JSON.stringify(res.tempFilePaths));
						console.log('图片路径：',res.tempFilePaths)
						self.tempFilePaths = res.tempFilePaths
 						for (var i = 0; i < res.tempFilePaths.length; i++) {
							self.addList.push({'photoName':null,'photPath':res.tempFilePaths[i]})
						}
						if(self.addList.length!=0){
							uni.navigateTo({
								url: "/pages/album/album-in?addList="+JSON.stringify(self.addList)+"&albumArrpho="+JSON.stringify(self.albumArr),
							});
						}
						console.log('addList',self.addList)
				    }
				})
				this.confirmShareClose()
			},
			/* 点击图片 */
			choseImg(index){
				console.log(index)
				/* 多选图片 */
				/* this.delNum要删除的图片的下标 */
				if(this.tabBar == true&&this.imgList[index].check == false){
					this.imgList[index].check = true
					this.imgList[index].opacity = 0.4
					this.delNum.push(index)
				}else if(this.tabBar == true&&this.imgList[index].check == true){
					this.imgList[index].check = false
					this.imgList[index].opacity = 1
					if(this.delNum.length!=0){
						for (var i = 0; i < this.delNum.length; i++) {
							if(this.delNum[i] == index){
								this.delNum.splice(i,1)
							}
						}
					}
				}else if(this.tabBar == false){
					console.log('imgList图片列表',this.imgList)
					uni.navigateTo({
					    url: "/pages/album/album-query?imgList="+JSON.stringify(this.imgList)+"&albumId="+this.albumId+"&imgIndex="+index+"&top="+1+'&personInfo='+JSON.stringify(this.personInfo)+'&userId='+this.form_id,
					});
				}
			},
			/* 多选删除相册内容图片列表 */
			delPhoto(){
				if(this.delNum.length!=0){
					console.log('删除图片')
					var str = []
					if(this.delNum.length!=0){
						for (var i = 0; i < this.delNum.length; i++) {
							console.log(this.imgList[this.delNum[i]].video_id)
							str.push(this.imgList[this.delNum[i]].video_id)
						}
						console.log('str',str.toString())
						let resData = {
							img_id:str.toString()
						}
						uni.showLoading({
						    title: '正在删除',
							mask:true
						});
						this.$api.apiPost('/user/video.Photo/delete',resData).then(res => {
							console.log(res)
							if(res.statusCode == 200){
								uni.hideLoading();
								uni.showToast({
								    title: '删除成功',
								    duration: 2000
								});
								this.imgList = []
								this.albumList()
							}else{
								uni.showToast({
									icon:'fail',
								    title: '删除失败',
								    duration: 2000
								});
							}
						})
					}
				}else{
					uni.showToast({
						icon:'none',
					    title: '请选中一张图片',
					    duration: 2000
					});
				}
			},
			/* 多选分享图片 */
			async share(){
				if(this.delNum.length!=0){
					uni.getSavedFileList({
					  success: function (res) {
					    console.log('本地已保存的图片',res.fileList);
					  }
					});
					console.log('要删除的图片的下标',this.delNum)
					let list = []
					for (var i = 0; i < this.delNum.length; i++) {
						list.push(this.imgList[this.delNum[i]].img_url)
					}
					console.log('list',list)
					let urls = {};
						urls.type = 'image'
						urls.pictures = [],
								urls.extra = {
									scene: "WXSceneSession"
								}
					for (var i = 0; i < list.length; i++) {
						let [, imgPath] = await uni.downloadFile({
							url: list[i]
						})
						urls.pictures.push(imgPath.tempFilePath)
					}
					console.log('urls',urls)
					plus.share.sendWithSystem(urls, function() {
						console.log('分享成功');
						uni.showToast({
						    title: '分享成功',
						    duration: 2000
						});
					}, function(e) {
						console.log('分享失败：' + JSON.stringify(e));
						uni.showToast({
						    title: '分享失败',
						    duration: 2000
						});
					})
				}else{
					uni.showToast({
						icon:'none',
					    title: '请选中一张图片',
					    duration: 2000
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	.content {
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #F3F3F3;
	}
	.check2{
		position: absolute;
		margin-left: 120rpx;
		margin-top: -50rpx;
		font-weight: bold;
		font-size: 20rpx;
		text-align: center;
		color: #FEFEFE;
		
		.iconqueding{
			font-size: 40rpx;
			background-color: #318EF1;
			color: #FFFFFF;
			border-radius: 10rpx;
			width: 20rpx;
			height: 20rpx;
		}
	}
	.image {
		width: 164rpx;
		height: 164rpx;
		border-radius: 10rpx;
	}
	.noClass{
		text-align: center;
		font-size: 36rpx;
		margin-top: 200rpx;
		color: #999999;
	}
	.add{
		/* width: 148px;
		height: 20px; */
		margin-top: 46rpx;
		color: #C0C4CC;
		font-size: 28rpx;
		line-height: 40rpx;
		text-align: center;
		/* margin: 23px 114px 0 114px; */
	}
	.imge{
		width: 440rpx;
		height: 304rpx;
		margin: 200rpx 154rpx 0 154rpx;
	}
	.flex-item {
		width: 66.6%;
		text-align: center;
		font-size: 32rpx;
	}
	.flex-item-V {
		border: 1upx solid #DADADA;
		width: 100%;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
	}
	.flex-item2 {
		width: 66.6%;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
	}
	.tab{
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #FFFFFF;
	}
	
	
	.addAlbum{
		font-weight: bold;
		color: #14CA9B;
	}
</style>
